<!DOCTYPE html>
<html>
<head>
	<title>Geo Point Accuracy - OpenError</title>
	<style>
		#demo-frame > div.demo { padding: 10px !important; };
	</style>
	<link type="text/css" href="../css/ui-lightness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
	<script>
	var map;
	var marker;
	var numDecimalPlaces = 14;
	var defaultPoint = { "type": "Point", "coordinates": [42.73373773778656, -84.55575972921827] };
	var newPoint = {"type": "Point", "coordinates":[0,0]};
	
	var geo$ = function(id) { return document.getElementById(id); };
	function decimalRounder(num, numDecimals, round) {
		if(numDecimals < 0) {
			throw new Error("negative number of decimal points given to decimalRounder function");
		}
	
		var splitNum = (num + "").split("."); // assumes US standard of writing decimals
		if(splitNum.length !== 2) {
			throw new Error("decimalRounder function encountered num argument with improperly written decimal");
		}
		
		// cover the case of rounding where the number of decimals requested is 0
		if(round && numDecimals == 0 && (splitNum[1].length > 0) && (splitNum[1][0] >= 5)) {
			return (parseFloat(finalNumber) + 1);
		}
		
		
		var finalNumber = splitNum[0] + ".";
		var decimalIndex = 0;
		while(decimalIndex < Math.min(numDecimals, splitNum[1].length)) {
			finalNumber += splitNum[1][decimalIndex++];
		}
		
		// cover the case of rounding where there is a digit that can be used to round
		if(round && (numDecimals < splitNum[1].length) && (splitNum[1][numDecimals] >= 5)) {
			var addition = "";
			while( addition.length < (numDecimals - 1)) {
				addition += "0";
			}
			console.log("0." + addition + "1");
			return (parseFloat(finalNumber) + parseFloat("0." + addition + "1"));
		} else {
			return parseFloat(finalNumber);
		}
	}
	
	function alterPoint() {
		/*for(var numDimensions = 0 ;numDimensions < defaultPoint.coordinates.length; numDimensions++ ) {
		}*/
		newPoint.coordinates[0] = defaultPoint.coordinates[0];
		newPoint.coordinates[1] = defaultPoint.coordinates[1];
		var round = geo$('rounding').checked ? true : false;
		newPoint.coordinates[0] = decimalRounder(newPoint.coordinates[0],numDecimalPlaces,round);
		newPoint.coordinates[1] = decimalRounder(newPoint.coordinates[1],numDecimalPlaces,round);

		geo$('pointLabel').innerHTML = newPoint.coordinates[0] + ", " + newPoint.coordinates[1];
	}
	
	// initialize slider
	$(function() {
		$( "#slider-range-max" ).slider({
			range: "max",
			min: 0,
			max: 15,
			value: 14,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value );
				numDecimalPlaces = ui.value;
				marker.setMap(null);
				alterPoint();
				marker = new google.maps.Marker({
					position: new google.maps.LatLng(newPoint.coordinates[0], newPoint.coordinates[1]),
					map: map
				});
			}
		});
		$( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
	});
	

	function init() {
		// create the google map
		var myOptions = {
		  zoom: 15,
		  mapTypeId: google.maps.MapTypeId.ROADMAP,
		  center: new google.maps.LatLng(defaultPoint.coordinates[0], defaultPoint.coordinates[1])
		}
		map = new google.maps.Map(document.getElementById("map"), myOptions);
		
		// create the marker
		marker = new google.maps.Marker({  
  			position: new google.maps.LatLng(defaultPoint.coordinates[0], defaultPoint.coordinates[1]),  
  			map: map
		});
	}
	</script>
</head>
<body onload="init()">
<h2>Visualize Point Accuracy</h2>
<p>A default geographic point has been placed on the map. Use the slider below to alter the point by rounding it's value to 
   to a certain number of decimal points - the marker on the map will be redrawn to show the effect.   
</p>

	<div class="demo">

		<p>
			<strong>Geographic Coordinate:</strong><span id="pointLabel" style="font-size: 12px;">42.73373773778656, -84.55575972921827</span><br/>
			<label for="amount"><strong>Number of Decimal Points:</strong></label><input type="checkbox" id="rounding" /> Round to new decimal place
			<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
		</p>
		<div id="slider-range-max" style="width:480px;"></div><br/><br/>
		<div id="map" style="width:640px;height:480px;">
		</div>
	</div>
</body>
</html>